<template>
  <div class="search mgt-10">
    <div class="asideBox">
      <!-- 侧边栏 -->
      <!-- <div></div> -->
      <!-- 内容页面 -->
      <el-container>
        <el-aside :width="isCollapseFlag ? '61px' : '230px'" :class="isCollapseFlag? '':'pd-5'" class="bg-58 boxS-i-4">
          <Aside :menuList="menuList" :isCollapse="isCollapseFlag" @getCollapseFlag="getCollapseFlag"/>
        </el-aside>
        <el-main>
          <div class="mgb-20">
            <swiper :swiperData="brokerData" :from="'index'"/>
          </div>
          <div class="mgtb-20">
            <swiper :swiperData="artuser" :from="'search'"/>
          </div>
          <div class="searchInfo mgt-30">
            <div class="search_title flex-s-between font-18">
              <div class="color-f font-f-iR">25834{{$t('collection.project')}}</div>
              <div class="flex">
                <drop-down />
                <div class="flex">
                  <div @click="changeRow('4')" class="mgr-20">
                    <img :src="rowType && rowType === '4'? rownInFourAcUrl : rownInFourUrl" alt="">
                  </div>
                  <div @click="changeRow('6')" class="mgr-20">
                    <img :src="rowType && rowType === '6'? rownInSixAcUrl : rownInSixUrl" alt="">
                  </div>
                </div>
              </div>
            </div>
            <div class="searchContent flex_w_start">
              <div class="searchItem" :style="{width: widthNum + '%', margin: '20px ' + marginNum + '%'}" v-for="item in collectionList.list" :key="item.id" @click="jumpToPage(item)">
              <!-- <div class="searchItem" :style="{width: widthNum + '%', margin: '20px ' + marginNum + '%'}" v-for="item in collectionList.list" :key="item.id"> -->
                <collection-item :collectionData="item" :pageFrom="pageFrom"/>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
import Swiper from '../components/component/Swiper'
import DropDown from '../components/component/Dropdown'
import CollectionItem from '../components/component/CollectionItem'
import Aside from '../components/component/Aside'
import { menuList } from '../mock/data'
const brokerData = [
  {
    id: 0,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../assets/chat/bank.svg')},
      {id: 1, img_url: require('../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../assets/chat/github.svg')},
      {id: 5, img_url: require('../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../assets/chat/discord.svg')},
      {id: 8, img_url: require('../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 1,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../assets/chat/bank.svg')},
      {id: 1, img_url: require('../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../assets/chat/github.svg')},
      {id: 5, img_url: require('../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../assets/chat/discord.svg')},
      {id: 8, img_url: require('../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 2,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../assets/chat/bank.svg')},
      {id: 1, img_url: require('../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../assets/chat/github.svg')},
      {id: 5, img_url: require('../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../assets/chat/discord.svg')},
      {id: 8, img_url: require('../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 3,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../assets/chat/bank.svg')},
      {id: 1, img_url: require('../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../assets/chat/github.svg')},
      {id: 5, img_url: require('../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../assets/chat/discord.svg')},
      {id: 8, img_url: require('../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 4,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../assets/chat/bank.svg')},
      {id: 1, img_url: require('../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../assets/chat/github.svg')},
      {id: 5, img_url: require('../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../assets/chat/discord.svg')},
      {id: 8, img_url: require('../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 5,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../assets/chat/bank.svg')},
      {id: 1, img_url: require('../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../assets/chat/github.svg')},
      {id: 5, img_url: require('../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../assets/chat/discord.svg')},
      {id: 8, img_url: require('../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 6,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../assets/chat/bank.svg')},
      {id: 1, img_url: require('../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../assets/chat/github.svg')},
      {id: 5, img_url: require('../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../assets/chat/discord.svg')},
      {id: 8, img_url: require('../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 7,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../assets/chat/bank.svg')},
      {id: 1, img_url: require('../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../assets/chat/github.svg')},
      {id: 5, img_url: require('../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../assets/chat/discord.svg')},
      {id: 8, img_url: require('../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../assets/img/img_d87@1x.png')}
    ]
  }
]
const artuser = [
  {id: 0, head_img: require('../assets/img/img_d87@1x.png'), name: 'super boy', isBroker: true, desc: '山木，自寇也；膏火，自煎也；桂可食，故伐之；漆可用，故搁值。人皆知有用之用，而莫知无用之用。'},
  {id: 1, head_img: require('../assets/img/img_d87@1x.png'), name: 'super boy', isBroker: false, desc: '山木，自寇也；膏火，自煎也；桂可食，故伐之；漆可用，故搁值。人皆知有用之用，而莫知无用之用。'},
  {id: 2, head_img: require('../assets/img/img_d87@1x.png'), name: 'super boy', isBroker: true, desc: '山木，自寇也；膏火，自煎也；桂可食，故伐之；漆可用，故搁值。人皆知有用之用，而莫知无用之用。'},
  {id: 3, head_img: require('../assets/img/img_d87@1x.png'), name: 'super boy', isBroker: false, desc: '山木，自寇也；膏火，自煎也；桂可食，故伐之；漆可用，故搁值。人皆知有用之用，而莫知无用之用。'},
  {id: 4, head_img: require('../assets/img/img_d87@1x.png'), name: 'super boy', isBroker: false, desc: '山木，自寇也；膏火，自煎也；桂可食，故伐之；漆可用，故搁值。人皆知有用之用，而莫知无用之用。'},
  {id: 5, head_img: require('../assets/img/img_d87@1x.png'), name: 'super boy', isBroker: true, desc: '山木，自寇也；膏火，自煎也；桂可食，故伐之；漆可用，故搁值。人皆知有用之用，而莫知无用之用。'},
  {id: 6, head_img: require('../assets/img/img_d87@1x.png'), name: 'super boy', isBroker: true, desc: '山木，自寇也；膏火，自煎也；桂可食，故伐之；漆可用，故搁值。人皆知有用之用，而莫知无用之用。'}
]
export default {
  components: {
    Swiper,
    DropDown,
    CollectionItem,
    Aside
  },
  data () {
    return {
      pageFrom: 'search',
      isCollapseFlag: false,
      menuList: menuList,
      brokerData: brokerData,
      artuser: artuser,
      collectionList: [],
      rowType: '4',
      widthNum: 18,
      marginNum: 1,
      rownInFourAcUrl: require('../assets/icon/row_four_active.svg'),
      rownInFourUrl: require('../assets/icon/row_four.svg'),
      rownInSixAcUrl: require('../assets/icon/row_six_active.svg'),
      rownInSixUrl: require('../assets/icon/row_six.svg'),
      searchWord: ''
    }
  },
  created () {
    console.log(this.isCollapseFlag, this.$route.query.searchWord)
    this.searchWord = this.$route.query.searchWord
    this.SearchList()
  },
  mounted () {
    // console.log(this.isCollapseFlag, this.$route.query.searchWord)
    // this.searchWord = this.$route.query.searchWord
  },
  watch: {
    isCollapseFlag (newVal, oldval) {
      if (newVal === false) {
        if (this.rowType === '4') {
          this.widthNum = 18
        } else {
          this.widthNum = 12
        }
        this.marginNum = 1
      } else {
        this.marginNum = 0.5
        if (this.rowType === '4') {
          this.widthNum = 12.5
        } else {
          this.widthNum = 10
        }
      }
    }
  },
  methods: {
    getCollapseFlag: function (val) {
      this.isCollapseFlag = val
    },
    changeRow: function (type) {
      console.log(type)
      this.rowType = type
      if (!this.isCollapseFlag) {
        if (type === '4') {
          this.widthNum = 18
        } else {
          this.widthNum = 12
        }
        this.marginNum = 1
      } else {
        this.marginNum = 0.5
        if (type === '4') {
          this.widthNum = 13.2
        } else {
          this.widthNum = 10
        }
      }
    },
    SearchList: function () {
      this.$loading.show()
      const params = {
        page: 1,
        pageSize: 20,
        collectionAddress: '',
        cond: this.searchWord
      }
      this.$Api.Collection.getSearchList(params)
        .then(res => {
          this.$loading.hide()
          // console.log(res, '-----------')
          if (res && res.code === 200) {
            res.data.list.forEach((item) => {
              // console.log(item)
              // 判断是否是拥有者
              if (item.asset.HoldAddress === this.$cookies.get('wallet_acount')) {
                item.asset.ownerFlag = true
              } else {
                item.asset.ownerFlag = false
              }
              // 判断是否上架作品
              if (item.makerOrder.ID === 0) {
                item.makerOrder.isSell = false
              } else {
                item.makerOrder.isSell = true
              }
            })
            this.collectionList = res.data
            // console.log(this.collectionList, '----------')
          }
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, JSON.stringify(err))
        })
    },
    jumpToPage: function (item) {
      console.log(item, JSON.stringify(item))
      // 跳转逻辑 owner detail  buyer issell 1 上架 buy  未上架 details
      let _path = '/details'
      if (item.makerOrder.isSell && !item.asset.ownerFlag) {
        _path = '/buypage'
      }
      this.$router.push({
        path: _path,
        query: {artId: item.asset.ID}
      })
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  .asideBox {
    .el-container {
      min-height: 100vh;
      .menucontent {

      }
    }
    .searchInfo {
      .search_title {
        height: 35px;
        line-height: 35px;
      }
      .searchContent {
        .searchItem {
          height: auto;
          margin: 20px 1%;
        }
      }
    }
  }
}
.el-submenu__title:hover{
   background: #585858;
}
//子级的类名
.el-menu-item:hover {
  background: #585858;
}
.el-menu-item .is-active {
  background: #585858!important;
  /* color: #fff; */
}
</style>
<style>
.el-menu {
  background: #585858;
}
.el-menu-item:hover {
  background: #585858;
}
.el-submenu__title:hover{
  background: #585858;
}
.el-menu-item.is-active {
  background: #585858!important;
  /* color: #fff; */
}
</style>
